<template>
  <div class="live-box">
    <div class="live">
      <!-- <i class="iconfont uncontaminated">&#xe6c8;
        <p>暂无视频</p>
      </i> -->
      <ul class="topMenu">
        <li class="tips">
          <i class="iconfont">&#xe65b;</i>{{area}}
        </li>
        <li v-show="backable" class="tips" @click="toMapView">
          <i class="iconfont">&#xe722;</i>返回上级
        </li>
      </ul>
      <video id="myPlayer" poster="" controls playsInline webkit-playsinline autoplay>
        <source src="rtmp://rtmp.open.ys7.com/openlive/a53534ec74a64b54aabe7b7522f42ac2.hd" type="" />
        <source src="http://hls.open.ys7.com/openlive/a53534ec74a64b54aabe7b7522f42ac2.hd.m3u8" type="application/x-mpegURL" />
      </video>
    </div>
  </div>
</template>

<script>
/*eslint-disable*/
import ezuikit from './ezuikit.js'
import { mapGetters } from 'vuex'
export default {
  name: 'Live',
  computed: {
    ...mapGetters([
      'backable',
      'area'
    ])
  },
  mounted () {
    let player = new EZUIPlayer('myPlayer')
    window.$('.live').hover(function () {
      window.$('.topMenu').stop(true, false).animate({ 'marginBottom': -50 })
    }, function () {
      window.$('.topMenu').stop(true, false).animate({ 'marginBottom': 0 })
    })
  },
  methods: {
    toMapView () {
      this.$store.commit('popCrumb')
      this.$router.push({
        path: this.$route.path.replace('/garden', '')
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.live-box
  width 100%
  height 100%
  padding 20px
  box-sizing border-box
  .live
    position relative
    width 100%
    height 100%
    border-radius 4px
    background rgba(0, 0, 0, 0.2)
    box-shadow inset 0 0 4px rgba(0, 0, 0, 0.1), 0 0 2px rgba(255, 255, 255, 0.3)
    overflow hidden
    .uncontaminated
      position absolute
      left 50%
      top 50%
      transform translate(-50%, -50%)
      font-size 100px
      color rgba(255, 255, 255, 0.05)
      p
        text-align center
        font-size 16px
        color rgba(255, 255, 255, 0.08)
    ul
      position absolute
      left 0
      bottom 100%
      width auto
      height 50px
      line-height 50px
      text-align left
      background rgba(0, 0, 0, 0)
      border-bottom 1px solid rgba(255, 255, 255, 0)
      li
        float left
        margin 10px 0 0 10px
      li:nth-child(2)
        cursor pointer
</style>

